<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Login Right Now</title>
	<style type="text/css">
		body {	
			background-color: #DEB887; 
			text-align: center;
		}
		
		.title {
			font-style: italic;
			text-align: center;
			font-family: Monaco;
			font-size: 20px;
			color: #FF7F24;
		}
		
		.text {
			background-color: #EEA9B8;
			font-family: Monaco;
			font-size: 16px;
			/* width: 750px; */
			/* text-align: center; */
		}
		
		img.submit {
			cursor: pointer;
		}
		
		span.keywords {
			font-style: oblique;  /* 斜體字 */
			font-weight: bold;
			color: #CC0000;
		}
		
		div.register {
			background-color: #FFFF99;
			font-family: Monaco;
			font-size: 16px;
			text-align: center;
		}
		
		div.submitBtn {
			background-image: url(./images/button.90x24.green.png);
			width: 90px;
			height: 24px;
			cursor: pointer;
		}
	</style>
	
	<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
	<script type="text/javascript">
		var userFirstName;
		var userLastName;
		var userId;
		var userEmail;
		var userSex;
		var userCellPhone;
		var userAge;
		var userCity;
		var userJob;
		
		window.onload = function() {
//			var submitImg1 = document.getElementsByTagName("img")[0];
			var resetBtn = document.getElementById("resetBtn");
			var commitRegisterFormBtn = document.getElementById("commit");
			
//			submitImg1.onclick = sendMemberParam;
			resetBtn.onclick = resetRegisterForm;
			commitRegisterFormBtn.onclick = checkNoErrorForRegisterForm;
			
			// 檢查是否有輸入id與密碼
			$("form[name='login']").submit(function() {
				if( $("input:first").val() == "" || $("input[name='userPassword']").val() == "" ) {
					alert("You have to enter your id and password!");
					$("input:first").focus();
					return false;  // 若回傳false，則表單資料值不會發送至Server Side
				} else true;  // 觸發submit
			});
			
			$("img[class='submit']").bind("click", sendMemberParam);
			// 利用jQuery的selector與bind()函式註冊事件處理器
		}
		
		// Reset for all elements in register form
		function resetRegisterForm() {
			document.getElementById("register").reset();
			// 重置所有id值為register的form表單元素
		}
		
		
		function checkNoErrorForRegisterForm() {
			if(!checkNameValue()) return;
			if(!checkIdValue()) return;
			if(!checkPasswordValue()) return;
			if(!checkEmailValue()) return;
			if(!checkSexValue()) return;
			if(!checkCellPhoneValue()) return;
			if(!checkAgeValue()) return;
			if(!checkCityValue()) return;
			if(!checkJobValue()) return;
			
			var isFormCorrect = confirm("Your first name is " + userFirstName + ".\n" +
				"Your last name is " + userLastName + ".\n" + 
				"Your id is " + userId + ".\n" + 
				"Your email address is " + userEmail + ".\n" +
				"Your cell phone number is " + userCellPhone + ".\n" +
				"Your age is around " + userAge + ".\n" +
				"Your live in " + userCity + ".\n" +
				"Your job is " + userJob + ".\n" +
				"Your sex is " + userSex + ".");
			if(isFormCorrect) {
				commitRegisterForm();
				alert("Thanks for join us. You member data has been commited!");
			} else {
				var isReset = confirm("Something wrong?\n" + "Do you want to reset the form again?");
				if(isReset) resetRegisterForm();
			}
		}
		
		function commitRegisterForm() {
			document.getElementById("register").submit();
		}
		
		// 檢查姓名表單欄位是有合法
		function checkNameValue() {
			var firstNameText = document.getElementById("firstName");
			var lastNameText = document.getElementById("lastName");
			if(firstNameText.value == "") {
				window.alert("You have to enter your first name!");
				firstNameText.focus();
				return false;
			}
			
			if(lastNameText.value == "") {
				window.alert("You have to enter your last name!");
				lastNameText.focus();
				return false;
			}
			userFirstName = firstNameText.value;
			userLastName = lastNameText.value;
			return true;
		}
		
		// 檢查帳號欄位
		function checkIdValue() {
			var accountId = document.getElementById("userId");
			if(accountId.value == "") {
				alert("You have to enter id what you want!");
				accountId.focus();
				return false;
			}
			
			if(accountId.value.indexOf("<") >= 0 || 
				accountId.value.indexOf(">") >= 0 ||
				accountId.value.indexOf("!") >= 0 ||
				accountId.value.indexOf("@") >= 0 ||
				accountId.value.indexOf("#") >= 0 ||
				accountId.value.indexOf("$") >= 0 ||
				accountId.value.indexOf("%") >= 0 ||
				accountId.value.indexOf("(") >= 0 ||
				accountId.value.indexOf(")") >= 0 ||
				accountId.value.indexOf("*") >= 0 ||
				accountId.value.indexOf("?") >= 0 ||
				accountId.value.indexOf("%") >= 0) 
				{
					alert("Sorry your id is invaild.\n You have to enter your id again");
					accountId.value = "";
					accountId.focus();
					return false;
				}
				
			if(accountId.value.length <= 5) {
				alert("Sorry you id is too short.\n" + "You need to enter a longer id again!");
				accountId.value = "";
				accountId.focus();
				return false;
			}
			userId = accountId.value;
			return true;
		}
		
		// 檢查密碼表單欄位
		function checkPasswordValue() {
			var pw = document.getElementById("pw");
			var pwAgain = document.getElementById("pwAgain");
			if(pw.value.length <= 6) {
				alert("Your password is too short.\n" + "You need to enter a longer password again!");
				pw.value = "";
				pw.focus();
				return false;
			}
			
			if(pw.value.indexOf("<") >= 0 ||
				pw.value.indexOf(">") >= 0 ||
				pw.value.indexOf("!") >= 0 ||
				pw.value.indexOf("@") >= 0 ||
				pw.value.indexOf("#") >= 0 ||
				pw.value.indexOf("$") >= 0 ||
				pw.value.indexOf("$") >= 0 ||
				pw.value.indexOf("%") >= 0 ||
				pw.value.indexOf("*") >= 0 ||
				pw.value.indexOf("(") >= 0 ||
				pw.value.indexOf(")") >= 0 ||
				pw.value.indexOf("&") >= 0)
				{
					alert("Sorry your password is invaild.\n You have to enter your id again");
					pw.value = "";
					pw.focus();
					return false;
				}
				
				if(pw.value != pwAgain.value) {
					alert("You have to enter the same password for both pw field!");
					pw.value = "";
					pwAgain.value = "";
					pw.focus();
					return false;
				}
			return true;
		}
		
		// 檢查email表單欄位
		function checkEmailValue() {
			var email = document.getElementById("email");
			if(email.value.length == 0) {
				alert("You have to enter your email address!");
				email.focus();
				return false;
			}
			
			if(email.value.indexOf("@") == -1) {
				alert("Your email address is invaild. Please enter it again!");
				email.value = "";
				email.focus();
				return false;
			}
			userEmail = email.value;
			return true;
		}
		
		// 檢查性別表單欄位
		function checkSexValue() {
			var sexRadio = document.getElementsByName("sex");
			
			var sex = "";
			for(var i = 0; i < sexRadio.length; i++) {
				if(sexRadio[i].checked && i == 0) {
					sex = sexRadio[i].value;
				} else if(sexRadio[i].checked && i == 1){
					sex = sexRadio[i].value;
				}
			}
			
			// 以下為失敗程式碼!
//			alert(sex);
//			alert(typeof(sex));
//			if(sex != "male" || sex != "female") {
//				alert("You have to choose the sex field!");
//				return false;
//			}
//			userSex = sex;
//			return true;
			
			// 以下的程式碼成功
			var count = 0;
			if(sexRadio.length > 1) {
				for(var i = 0; i < sexRadio.length; i++) {
					if(sexRadio[i].checked) count = 1;
				}
			} else {
				if(sexRadio.checked) count = 1;
			}
			
			// alert(count);
			if(count < 1) {
				alert("You have to choose the sex field!");
				return false;
			}
			userSex = sex;
			return true;
		}
		
		function checkCellPhoneValue() {
			// 取得該表單欄位的字串值長度
			if( $("#phoneNum").val().length != 10 ) {
				alert("Your cell phone number is not correct!");
				$("#phoneNum").val("");
				$("#phoneNum").focus();
				return false;
			}
			
			if( $("#phoneNum").val().substring(0, 2) != "09" ){
				alert("Your cell phone number is not correct!");
				$("#phoneNum").val("");
				$("#phoneNum").focus();
				return false;
			}
			userCellPhone = $("#phoneNum").val();
			return true;
		}
		
		function checkAgeValue() {
			var age = $("select[name='age']").val();
			if(age == 0) {
				alert("You have to choose your age!");
				$("select[name='age']").focus();
				return false;
			}
			userAge = age;
			return true;
		}
		
		function checkCityValue() {
			var city = $("select[name$='ty']").val();
			if(city == 0) {
				alert("You have to select the city you live.");
				$('#city').focus();
				return false;
			}
			userCity = city;
			return true;
		}
		
		function checkJobValue() {
			var job = $("#job").val();
			if(job == 0) {
				alert("You have to select your job.");
				$("#job").focus();
				return false;
			}
			userJob = job;
			return true;
		}
		
		// 送出user的id與密碼的函式
		function sendMemberParam(evt) {
			// 以下為javascript的solution
//			var event = evt || window.event;
//			var target = event.target || event.srcElement;
//			var parentForm = target.parentNode;
//			parentForm.submit();  // 呼叫submit()函式，促使form元素對Server Side送出請求參數

			// 以下為jQuery的solution
			$("form[name='login']").submit(); // 透過jQuery的selector取得form元素
			// 再透過jQuery的submit()函式，自行觸發submit事件			
		}
		
		function sendColorParam() {
			document.form1.submit();
		}
	</script>
</head>

<body>
	<div class="title">Join us, right now...</div>
	<div class="text">
		<form name="login" action="login.do" method="POST">
			Your account: <input type="text" name="userAccount"	/><br />
			Your password: <input type="password" name="userPassword" /><br />
			
			<!-- 以下的img元素，可以透過javascript，仍然能送出login表單元素中的請求參數 -->
			<img class="submit" src="./images/loginBtn.jpg"  id="imgBtn" /><br />
			<input type="submit" value="Submit" /> <!-- 可以送出請求參數 -->
		</form>
		
		<form name="form1" method="POST" action="testform.do">
		     <select name="color" size="1" onchange="sendColorParam();">
			     <option selected="selected" value="0">請選擇</option>
			     <option value="white">white</option>
			     <option value="red">red</option>
		     </select>
		</form>
	</div>&nbsp;
	
	<div class="register">
		If you are not our member. You can register your account right now.<br />
		<table width="98%" border="1" align="center" bgcolor="#CC9966">
			<form name="register" id="register" method="POST" action="test.do">
				<tr>
					<td width="50%" align="center">
						Your real <span class="keywords">first name</span>: 
						<input type="text" name="firstName" size="20" id="firstName" />
					</td>
					<td width="50%" align="center" colspan="2">
						Your <span class="keywords">id account</span>: 
						<input type="text" name="userId" size="20" maxlength="15" id="userId" />
					</td>	
				</tr>
				<tr>
					<td align="center">
						Your real <span class="keywords"> last name</span>: 
						<input type="text" name="lastName" size="20" id="lastName" />						
					</td>
					<td align="center" colspan="2">
						Your birthday: <input type="text" name="birthday" size="20" id="birthday" />						
					</td>
				</tr>
				<tr bgcolor="#996666">
					<td align="center">
						Your <span class="keywords"> password </span>:  
						<input type="password" name="pw" size="20" maxlength="15" id="pw" />						
					</td>
					<td align="center" colspan="2">
						Please enter your <span class="keywords"> password </span> again:  
						<input type="password" name="pwAgain" size="20" maxlength="15" id="pwAgain"/>						
					</td>
				</tr>
				
				<tr>
					<td align="center">
						Your <span class="keywords">email </span>:  
						<input type="text" name="email" size="20" id="email"/>						
					</td>
					<td align="center" colspan="2">
						Your cell phone number: <input type="text" name="phoneNum" size="20" id="phoneNum"/>						
					</td>
				</tr>
				<tr>
					<td align="center">
						Your hobby: <input type="text" name="hobby" size="20" id="hobby"/>						
					</td>
					<td align="center" colspan="2">
						Your city: 
						<select name="city" id="city" size="1">
							<option value="0" selected="selected">請選擇</option>
							<option value="New York">New York</option>
							<option value="Tokyo">Tokyo</option>
							<option value="Taipei">Taipei</option>
							<option value="Paris">Paris</option>
							<option value="Berlin">Berlin</option>
							<option value="other">other</option>
						</select>						
					</td>
				</tr>
				<tr>
					<td align="center" width="10%">
						Sex: <input type="radio" name="sex" id="sex" value="male" />male&nbsp;
							 <input type="radio" name="sex" id="sex" value="female" />female
					</td>
					<td align="center" width="20%">
						Your age:
						<select name="age" id="age" size="1">
							<option value="0" selected="selected">請選擇</option>
							<option value="7-10">7-10</option>
							<option value="10-18">10-18</option>
							<option value="18-25">18-25</option>
							<option value="25-30">25-30</option>
							<option value="30-40">30-40</option>
							<option value="other">other</option>
						</select>						
					</td>
					<td align="center" width="70%">
						Your job is:
						<select name="job" id="job" size="1">
							<option value="0" selected="selected">請選擇</option>
							<option value="programer">programer</option>
							<option value="web designer">web designer</option>
							<option value="manager">manager</option>
							<option value="system designer">system designer</option>
							<option value="system analyzer">system analyzer</option>
							<option value="other">other</option>
						</select>					
					</td>
				</tr>
			</form>
			
		</table>
		
		<div class="submitBtn" style="position:relative; left:450px; float:left;" id="commit">Submit</div>
		<div class="submitBtn" style="position:relative; left:465px; float:left;" id="resetBtn">Reset</div>
	</div> <!-- end of class="register" div -->
	
</body>
</html>